<template>
    <div>
        <Modal
         :title="model.id?'编辑会员':'添加会员'"
         :value="value"
         @on-ok="save"
         @on-visible-change="visibleChange"
         :mask-closable="false"
        >
            <Form ref="memberForm" :rules="commodityRule" :model="model" :label-width="100">
                <FormItem label="头像" prop="head">
                    <picture-single v-model="model" prop="head" :height=100 :width=100></picture-single>
                </FormItem>
                <FormItem label="用户名" prop="userName">
                    <span v-if="model.id">{{ model.userName }}</span>
                    <Input v-if="!model.id" v-model="model.userName" size="small" :maxlength="32" :minlength="2" w10 />
                </FormItem>
                <FormItem label="密码" prop="password">
                    <span v-if="model.resetPassword==false" linkable blue @click="model.resetPassword=true">重置密码</span>
                    <Input v-if="model.resetPassword" v-model="model.password" :type="showPassword?'text':'password'" size="small" placeholder="" w10 mgr2>
                        <Icon type="md-eye" slot="suffix" title="" @click="handleShowPassword(true)" linkable :blue="showPassword" />
                    </Input>
                    <span v-if="model.resetPassword&&model.id" linkable blue @click="model.resetPassword=false">取消重置</span>
                </FormItem>
                <FormItem label="姓名" prop="name">
                    <Input v-model="model.name" size="small" :maxlength="32" :minlength="2" w10 />
                </FormItem>
                <FormItem label="手机" prop="phoneNumber">
                    <span v-if="model.id">{{ model.phoneNumber || '未填写' }}</span>
                    <Input v-if="!model.id" v-model="model.phoneNumber" size="small" :maxlength="32" :minlength="2" w10 />
                </FormItem>
                <FormItem label="邮箱" prop="emailAddress">
                    <span v-if="model.id">{{ model.emailAddress || '未填写' }}</span>
                    <Input v-if="!model.id" v-model="model.emailAddress" size="small" :maxlength="32" :minlength="2" w10 />
                </FormItem>
                <!-- <FormItem label="会员等级" prop="level">
                    <Input v-model="model.level" size="small" :maxlength="32" :minlength="2" w10 />
                </FormItem> -->
                <FormItem label="当前积分" prop="xpValue">
                    <span v-if="model.id">{{ model.xpValue }}</span>
                    <InputNumber v-if="!model.id" v-model="model.xpValue" size="small" :min=0 />
                </FormItem>
                <!-- <FormItem label="会员分组" prop="groups">
                    <p gray3 style="line-height:16px;">以下信息仅管理员可见</p>
                    <Input v-model="model.groups" size="small" :maxlength="32" :minlength="2" w10 />
                </FormItem> -->
                <FormItem label="备注" prop="remark">
                    <Input v-model="model.remark" size="small" type="textarea" :rows="3" />
                </FormItem>
                <!-- <FormItem label="审核状态" prop="status">
                    <RadioGroup v-model="model.status">
                        <Radio :label="0">未审核</Radio>
                        <Radio :label="1">审核通过</Radio>
                        <Radio :label="2">未通过</Radio>
                    </RadioGroup>
                </FormItem> -->
            </Form>

            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button @click="save" type="primary">{{model.id?'保存':'添加'}}</Button>
            </div>
        </Modal>
    </div>
</template>
<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import Util from '../../lib/util'
import AbpBase from '../../lib/abpbase'
import PictureSingle from '@common/components/picture-single.vue'
import { passwordValidator } from '@common/lib/validates'

@Component({
    components: {
        PictureSingle
    }
})
export default class CreateCommodity extends AbpBase{
    @Prop({type:Boolean,default:false}) value:boolean;
    @Prop() model:any;
	showPassword:Boolean = false;
    get memberLevels() {
        return this.$store.state.setting.settings.memberLevels;
    }
	handleShowPassword() {
		this.showPassword = !this.showPassword;
	}
    save(){
        (this.$refs.memberForm as any).validate(async (valid:boolean) => {
            if(valid){
                if(!this.model.id) {
                    let response = await this.post("Member/Create", this.model);
                    if(response.success) {
                        (this.$refs.memberForm as any).resetFields();
                        this.$emit('save-success');
                        this.$emit('input',false);
                    }
                }else {
                    let response = await this.put("Member/Update", this.model);
                    if(response.success) {
                        (this.$refs.memberForm as any).resetFields();
                        this.$emit('save-success');
                        this.$emit('input',false);
                    }
                }
            }
        })
    }
    cancel(){
        (this.$refs.memberForm as any).resetFields();
        this.$emit('input',false);
    }
    visibleChange(value:boolean) {
        if(!value){
            this.$emit('input',value);
        }
    }
    get commodityRule() {
        return {
            userName: [ {required: true, message: "请填写用户名", trigger: 'blur' } ],
            password: [ this.model.resetPassword ? {required: true, validator: passwordValidator, trigger: 'blur' } : {} ],
            emailAddress: [
                !this.model.id ? { type: 'email', message: '错误的邮箱格式' } : {}
            ]
        }
    }
    @Watch('model')
    handleOnModelChange() {
        console.log(this.model.resetPassword)
    }
}
</script>